/**
 * Created by zhr on 2017/6/27.
 */
import React from "react";
import Relay from 'react-relay';
import { message } from 'antd';
import { Button, Modal, Input } from 'fly';
import './common.css';
export default class Tab extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sendVisible: false,
            company:'',
            mark:'',
            num:''
        }
        this.handleOk = this.handleOk.bind(this);
        this.handleCancel = this.handleCancel.bind(this);
        this.showModal = this.showModal.bind(this);
    }


    showModal() {
        this.setState({
            replyVisible: true,
        });
    }
    handleOk() {
        message.config({
            top: 30
        })
        if (this.state.company == '') {
            message.warn('请填写快递公司')
            return;
        }
        if (this.state.num == '') {
            message.warn('请填写快递编号')
            return;
        }
        this.setState({
            replyVisible: false,
        });
        let send = {}
        send.company = this.state.company;
        send.number = this.state.num;
        send.remark = this.state.mark;
        this.props.sendInfo(JSON.stringify(send))

    }
    handleCancel() {
        this.setState({
            replyVisible: false,
            company:'',
            mark:'',
            num:''
        })
    }
    inputChange(type,e) {
        // console.log(event);
        let reg1 = /^[\u4e00-\u9fa5_a-zA-Z]{0,20}$/;
        let reg2 =  /^[0-9a-zA-Z]{0,20}$/g;
        if (type == 'company' ) {
            if (!reg1.test(e.target.value) && e.target.value != '') {
                return;
            }
            this.setState({
                company: e.target.value,
            })
        }
        if (type == 'num') {
            if (!reg2.test(e.target.value) && e.target.value != '') {
                return;
            }
            this.setState({
                num: e.target.value,
            })
        }
        if (type == 'mark') {
            if (e.target.value.length > 100) {
                return;
            }
            this.setState({
                mark: e.target.value
            })
        }

    }
    render() {
        const { } = this.state
        return (
            <div className="">
                {/*<Button type="primary" onClick={this.showModal}>Open</Button>*/}
                <Modal
                    title="填写寄出信息"
                    visible={this.state.replyVisible}
                    // visible={true}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <div className="reply_box">
                        <p>
                            <span><a>*</a>快递公司</span>
                            <Input value={this.state.company} onChange={this.inputChange.bind(this,'company')} placeholder="请输入快递公司" />
                            {/*<span style={{lineHeight: '2.5',paddingLeft: '10px'}}>请输入中文或字母</span>*/}
                        </p>
                        <p>
                            <span><a>*</a>快递编号</span>
                            <Input value={this.state.num} onChange={this.inputChange.bind(this,'num')} placeholder="请输入快递编号" />
                            {/*<span style={{lineHeight: '2.5',paddingLeft: '10px'}}>请输入数字</span>*/}
                        </p>
                        <p>
                            <span style={{paddingLeft:'33px',boxSizing:'border-box'}}>备注</span>
                            <Input value={this.state.mark} style={{resize:'none',width: 400,minHeight:'28px'}} type="textarea" onChange={this.inputChange.bind(this,'mark')} placeholder="请输入备注" />
                        </p>
                    </div>
                </Modal>
            </div>
        )
    }
}